<template>
    <el-dialog title="添加活动" width="30%" center v-model="props.addShow" @close="hideAdd">
        <el-input v-model="listParams.keyword" class="w-50 m-2" size="small" placeholder="商品名称搜索" :suffix-icon="Search"
            @change="search" />

        <el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange">
            <el-table-column prop="id" type="selection"></el-table-column>
            <el-table-column prop="name" label="商品名称" />
            <el-table-column prop="productSn" label="货号">
                <template #default="scope">
                    NO.
                </template>
            </el-table-column>
            <el-table-column prop="price" label="价格">
                <template #default="scope">
                    ￥{{ scope.row.price }}
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <ElConfigProvider :locale="zhCn">
            <el-pagination background layout=" prev,pager, next " v-model:currentPage="listParams.pageNum"
                @update:current-page="changePageNum" :total="pageTotal" :page-sizes="[5, 10, 15]" :page-size="5" />
        </ElConfigProvider>

        <el-button @click="hideAdd">取消</el-button>
        <el-button type="primary" @click="sureAdd">确定</el-button>
    </el-dialog>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { defineProps, defineEmits, reactive, toRefs, ref } from "vue"
import { marketing } from "@/api"
import { ElConfigProvider, ElMessageBox, ElMessage } from 'element-plus';
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { useRoute } from 'vue-router';

interface IState {
    tableData: IQueryPageFlashRSPProduct[],
    listParams: IUserListParams,
    pageTotal: number
}

const route = useRoute()

const multipleSelection = ref<any[]>([])


const handleSelectionChange = (val: IQueryPageFlashRSPList[]) => {
    multipleSelection.value = val.map(item => {
        return {
            flashPromotionId: route.query.flashPromotionId,
            flashPromotionSessionId: route.query.flashPromotionSessionId,
            productId: item.id
        }
    })
    // console.log(multipleSelection);
}

const props = defineProps({
    addShow: {
        type: Boolean,
        default: false
    }
})

const state: IState = reactive({
    tableData: [],
    listParams: {
        keyword: "",
        pageNum: 1,
        pageSize: 5
    },
    pageTotal: 0
})

const emit = defineEmits(['hideAdd'])

const hideAdd = () => {
    emit('hideAdd')
}

const getQueryProduct = () => {
    marketing.queryProductApi(state.listParams).then(res => {
        if (res.code === 200) {
            // console.log(res);
            state.tableData = res.data.list
            state.pageTotal = res.data.total
        }
    })
}
getQueryProduct()

const search = () => {
    // console.log(state.listParams.keyword);
    getQueryProduct()
}

const changePageNum = () => {
    getQueryProduct()
}

const sureAdd = () => {
    ElMessageBox.confirm(
        '确定要进行添加操作?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        marketing.addFlashProductRelation(multipleSelection.value).then(res => {
            if (res.code === 200) {
                ElMessage.success("添加成功")
                hideAdd()
            }
        })
    }).catch(() => {
    })
}

const { tableData, listParams, pageTotal } = toRefs(state)
</script>

<style scoped>

</style>